<template>
    <!-- 底部 -->

    <!-- 搜索以及分类 -->
    <el-card class="card" shadow="always" :body-style="{ padding: '20px' }">
        <el-form :inline="true">
            <el-form-item label="" class="formOne">
                <div class="searchInput">
                    <!-- <el-icon class="icon">
                            <search />
                        </el-icon> -->
                    <svg t="1666227620972" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2137" width="14" height="14">
                        <path
                            d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
                            p-id="2138" fill="#bfbfbf"></path>
                    </svg>
                    <input type="text">
                </div>
                <button class="formButton">搜索</button>
            </el-form-item>
            <el-form-item label="资源类型" label-width="auto" size="default">
                <el-select  placeholder="全部资源" clearable filterable @change="" >
                    <el-option-group class="optionGroup"  label="全部资源" >
                        <el-option  label="作品" ></el-option>
                        <el-option  label="教程" ></el-option>
                        <el-option  label="动态" ></el-option>
                        <el-option  label="专题" ></el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" label-width="40px" size="default">
                <el-select placeholder="全部" clearable filterable @change="">
                    <el-option-group  label="全部">
                        <el-option  label="已发布" ></el-option>
                        <el-option  label="未发布" ></el-option>
                        <el-option  label="审核中" ></el-option>
                        <el-option  label="审核未通过" ></el-option>
                        <el-option  label="仅主页可见" ></el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
        </el-form>
        <el-table stripe class="table" empty-text="无更多内容" :header-cell-style="{background:'#f5f7f9'}">
            <el-table-column label="内容" width="300px" align="center"></el-table-column>
            <el-table-column label="发布时间" width="200px" align="center"></el-table-column>
            <el-table-column label="数据" width="160px" align="center"></el-table-column>
            <el-table-column label="状态" width="160px" align="center"></el-table-column>
            <el-table-column label="操作" width="150px" align="center"></el-table-column>
        </el-table>
    </el-card>
    <!-- 表格 -->

</template>

<script setup lang="ts">

</script>

<style scoped>
.card {
    min-height: 800px;
}

/* form组件的第一个,搜索和输入框的样式 */
.formOne {
    /* height: 40px; */
}

.searchInput {
    border-radius: 5px;
    border: 1px solid #eaecf0;
    background-color: #f5f7f9;
}

/* form组件中的icon */
.icon {
    height: 35px;
    padding: 0 5px;
    float: left;
}

/* .icon-search {
 
} */

.formOne input {
    float: right;
    height: 35px;
    border: none;
    width: 200px;
    outline: none;
    padding: 0 10px;
    background-color: #f5f7f9;
}

/* 按钮的样式 */
.formButton {
    height: 35px;
    background-color: #f5f7f9;
    padding: 12px 15px;
    display: inline-block;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
    line-height: 11px;
    color: #7d8090;
}

/* 多选框组名的设置 */
/* /deep/ .optionGroup{
    color: #f93684 ;
    font-size: 25px;
} */
</style>